<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <title>iScroll demo: probe</title>

    <script type="text/javascript" src="__JS__/iscroll-master/build/iscroll-probe.js"></script>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="__JS__/less.min.js"></script>

    <script>



//           $(document).on("click",'li',function(event){
//
//
//               alert("你好,请看效果"+$(this).text());
//           });

//           $(document).on("touchstart",'.dianji',function(event){
//
//
//
//           });
//
//        var dianjiClick = function () {
//
//       支持$(this)
//
//        }
//
//        $(".dianji").unbind('click');
//        $(".dianji").bind('click', dianjiClick);
//
//        $(".dianji").click(dianjiClick);



    </script>

    <script type="text/javascript">

        var myScroll;
        var pullDownFlag,pullUpFlag;
        var pullDown,pullUp;
        var spinner;

        function positionJudge(){
            if(this.y>-20){    //判断下拉
                pullDown.innerHTML = "放开刷新页面";
                pullDownFlag = 1;
            }else if(this.y<(this.maxScrollY+30)){   //判断上拉
                pullUp.innerHTML = "放开刷新页面";
                pullUpFlag = 1;
            }
        }


        function action(){
            if(pullDownFlag==1){
                pullDownAction();
                pullDown.innerHTML = "下拉刷新…";
                pullDownFlag = 0;
            }else if(pullUpFlag==1){
                pullUpAction();
                pullUp.innerHTML = "上拉刷新…";
                pullUpFlag = 0;
            }
        }

        function loaded(){
            pullDownFlag = 0;
            pullUpFlag = 0;
            pullDown = document.getElementById("pullDown");
            pullUp = document.getElementById("pullUp");
            spinner = document.getElementById("spinner");
            myScroll = new IScroll("#wrapper",{
                probeType: 3,

                mouseWheel: true,//鼠标滑轮开启
                scrollbars: true,//滚动条可见
                fadeScrollbars: true,//滚动条渐隐
                interactiveScrollbars: true,//滚动条可拖动
                shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩
                useTransform: true,//CSS转化
                useTransition: true,//CSS过渡
                bounce: true,//反弹
                freeScroll: false,//只能在一个方向上滑动
                startX: 0,
                startY: 0,
                preventDefault: false,

            });
            myScroll.on('scroll',positionJudge);
            myScroll.on("scrollEnd",action);

        }


        function pullDownAction(){
            var Url="{:U('Gundong/ajax')}";
            var page = parseInt($(".page").text());
            var vdata = {idd:page};

            $.ajax({
             type:"post",
             url:Url,
             data:vdata,
             dataType:"json",
              success:function(data){
               // alert(data.message);

                  var list = data.message;
                  var apage = data.page;
                  var apage = parseInt(data.page);
                  var cpage = parseInt($(".page").text());
                 if(apage!=cpage){



                 }else{

                    var thtml = "";
                 $.each(list,function(index,item){

                    thtml+="<li class='dianji'>"+item.id+"#######"+item.title+"</li>";

                 })

                  $("#list").append(thtml);

                     page+=1;
                  $(".page").text(page);

                 }

                  myScroll.refresh();


              },
                error: function (xhr, type) {
                    alert('Ajax error!')
                }
            })
        }
        function pullUpAction(){

            var Url="{:U('Gundong/ajax')}";
            var page = parseInt($(".page").text());
            var vdata = {idd:page};

            $.ajax({
                type:"post",
                url:Url,
                data:vdata,
                dataType:"json",
                success:function(data){

                    var list = data.message;
                    var apage = parseInt(data.page);
                    var cpage = parseInt($(".page").text());
                    if(apage!=cpage){

                    }else{

                        var thtml = "";
                        $.each(list,function(index,item){

                            thtml+="<li class='dianji'>"+item.id+"########"+item.title+"</li>";

                        })

                        $("#list").append(thtml);

                        page+=1;
                        $(".page").text(page);

                    }

                    myScroll.refresh();


                },
                error: function (xhr, type) {
                    alert('Ajax error!')
                }
            })
        }
        function updatePosition(){
            pullDown.innerHTML = this.y>>0;
        }


        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    </script>

    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        html {
            -ms-touch-action: none;
        }

        body,ul,li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body {
            font-size: 12px;
            font-family: ubuntu, helvetica, arial;
            overflow: hidden; /* this is important to prevent the whole page to bounce */
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        #scroller ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }

        #scroller li {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            background-color: #fafafa;
            font-size: 14px;
        }

        #monitor {
            position: absolute;
            left: 51%;
        }

        .spinner {
            display: none;
            width: 60px;
            height: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;
            z-index: 10;
            background: rgba(0, 0, 0, 0);
        }
        .spinner .double-bounce1,
        .spinner .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #000;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: bounce 2s infinite ease-in-out;
            animation: bounce 2s infinite ease-in-out;
        }
        .spinner .double-bounce2 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        @-webkit-keyframes bounce {
            0%,
            100% {
                -webkit-transform: scale(0);
            }
            50% {
                -webkit-transform: scale(1);
            }

        }
        @keyframes bounce {
            0%,
            100% {
                transform: scale(0);
                -webkit-transform: scale(0);
            }
            50% {
                transform: scale(1);
                -webkit-transform: scale(1);
            }

        }


    </style>

</head>
<body onload="loaded()">
<header>iScroll</header>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span style="display: none;">下拉刷新…</span>
        </div>
        <ul id="list">
            <li>llll 1</li>
            <li>llll 2</li>
            <li>llll 3</li>
            <li>llll 4</li>
            <li>llll 5</li>
            <li>llll 6</li>
            <li>llll 7</li>
            <li>llll 8</li>
            <li>llll 9</li>
            <li>llll 10</li>
            <li>llll 11</li>
            <li>llll 12</li>
            <li>llll 13</li>
            <li>llll 14</li>
            <li>llll 15</li>
            <li>llll 16</li>
            <li>llll 17</li>
            <li>llll 18</li>
            <li>llll 19</li>
            <li>llll 20</li>
            <li>llll 21</li>
            <li>llll 22</li>
            <li>llll 23</li>
            <li>llll 24</li>
            <li>llll 25</li>
            <li>llll 26</li>
            <li>llll 27</li>
            <li>llll 28</li>
        </ul>
        <button class="buyao">3423r</button>

        <div class="page" style="display: none;">1</div>
        <div id="pullUp">
            <span>上拉加载更多…</span>
        </div>
    </div>
</div>
<div id="spinner">
    <div></div>
    <div></div>
</div>
</body>
</html>
